<template>
	<view class="head-custom-wrap" v-if="isHead">
		<template v-if="isSpace">
			<view class="spaceBar " :style="{ height: statusBarHeight + 'px' }"></view>
			<view class="spaceHead"></view>
		</template>
		<!-- <view class="head-custom head-fixed" :class="[isApp ? 'head-app': 'head-transparent']"> -->
		<view class="head-custom head-fixed"
			:class="{
				'head-app': isApp,
				'head-transparent': !isApp,
				'bg-none': !isBg,
				'head-circle': isCircle,
				'head-Blur': isBlur,
				'head-bg': isActive
			}">
			<view class="statusBarHeight" :style="{ height: statusBarHeight + 'px' }"></view>
			<view class="head fboxRow Ycenter">
				<view class="left fboxRow Ycenter" v-if="isBack || title || isChange">
					<view class="inner fboxRow Ycenter">
						<view class="action-btn fboxRow Ycenter Xcenter" @click="goHome" v-if="isChange && isHome"><text class="bwfont bw-a-zu1221"></text></view>
						<view class="action-btn fboxRow Ycenter" @click="backTap" v-else style="padding: 0 20rpx;"><text v-if="isBack" class="bwfont bw-fanhui"></text></view>
						<view class="font38 fboxRow Ycenter color-E8CDA7 title" @click="backTap" v-if="title">{{ title }}</view>
					</view>
				</view>
				<template v-if="isGrade">
					<view class="flex1 fboxRow Ycenter Xcenter">
						<view class="nav-filter fboxRow Ycenter" @tap="downFilter">
						  <view class='nav-title fboxRow Ycenter font28' :class="popupFilter ? 'active': ''">
							<text>{{gradeName}}</text>
							<text class="bksCIcon bks-c-ziyuan47down"></text>
						  </view>
						</view>
					</view>
					<view class="right fboxRow Ycenter Xend">
						<slot name="right"></slot>
						<view @tap="goSearch" v-if="isSearchBtn">
							<u-icon name="search" size="24"></u-icon>
							<!-- <view class="action-btn home-action fboxRow Ycenter Xcenter" @click="goHome"><text class="bwfont bw-a-zu1221"></text></view> -->
						</view>
					</view>
				</template>
				<view class="flex1" v-else-if="isSearch">
					  <u--input
						class="input"
					    placeholder="请输入内容"
						shape="circle"
					    v-model="_searchValue"
					    @change="searchChange"
					  ></u--input>
				</view>
				<view class="flex1" v-else>
					
				</view>
			</view>
		</view>
		<u-overlay :show="popupFilter" zIndex="7" @click="popupFilter = false">
			<view class="spaceBar" style="background-color: #fff;" :style="{ height: popupSpace + 'px' }"></view>
			<view class="popupFilter">
			  <view v-for="(item,index) in gradeList" :key="index">
				<view class="tag fboxRow Ycenter font28" @tap="tagTap(item)">
					<view class="flex1" :class="grade == item.gradeId ? 'color-00C15D' : ''">{{item.gradeName}}</view>
					<text class="bksCIcon bks-c-ziyuan67gouxuan font20" :class="grade == item.gradeId ? 'color-00C15D' : 'color-fff'"></text>
				</view>
			  </view>
			</view>
		</u-overlay>
	</view>
</template>

<script>
import { getAndroidVersion } from '@/api/index.js';
import { getRequest } from '@/static/js/common.js';
import { base64decode, base64encode, utf8to16 } from '@/static/js/Base64.js';
import { openAppULink, openAppULinkNew } from '@/static/js/common.js';
import {gradeSelect} from '@/api/bks.video.js';
export default {
	name: 'head-custom',
	components: {},
	props: {
		isActive: {
			type: Boolean,
			default: false
		},
		isBg: {
			// 是否有背景
			type: Boolean,
			default: true
		},
		title: {
			type: String,
			default: '' // 标题
		},
		isGrade: { // 选择年级
			type: Boolean,
			default: false
		},
		isSearch: { // 搜索
			type: Boolean,
			default: false
		},
		isSearchBtn: { // 搜索
			type: Boolean,
			default: false
		},
		isChange: {
			// 返回和首页按钮交换
			type: Boolean,
			default: false
		},
		isBlur: {
			// 是否虚化
			type: Boolean,
			default: true
		},
		isSpace: {
			type: Boolean,
			default: true //占位
		},
		isCircle: {
			type: Boolean,
			default: false // 透明 按钮灰背景
		},
		isHome: {
			type: Boolean,
			default: true // 是否显示主页
		},
		isBack: {
			type: Boolean,
			default: true // 是否显示返回按钮
		},
		isAppBtn: {
			type: Boolean,
			default: true // 是否显示打开APP
		},
		linkData: {
			type: Object,
			default: () => {
				return {}; // 友盟超链增加参数
			}
		},
		linkId: {
			type: String,
			default: 'usr103rs12t9nk1c' // 友盟超链对应分享key
		},
		isOpeninstall: {
			type: Boolean,
			default: false
		},
		searchValue: {
			type: String,
			default: '' // 搜索value
		},
	},
	data() {
		return {
			sys: {},
			statusBarHeight: getApp().globalData.statusBarHeight,
			isApp: false,
			urlAndroid: '',
			timer: null,
			isHead: true,
			gradeList: [
			  { gradeName: '所有年级', gradeId: 0 }
			],
			grade: 0,
			gradeName: '所有年级',
			popupFilter: false,
			popupSpace: 0
		};
	},
	computed: {
		_linkData: {
			get() {
				return this.linkData;
			},
			set(val) {
				this.$emit('update:linkData', val);
			}
		},
		_searchValue: {
			get() {
				return this.searchValue;
			},
			set(val) {
				this.$emit('update:searchValue', val);
			}
		}
	},
	created() {
		// #ifdef H5
		this.$bridge.initHandler((message, responseCallback) => {
			const responseData = '初始化收收到来自Java的数据，回传数据给你';
			responseCallback(responseData);
		});
		// #endif
		this.statusBarHeight = getApp().globalData.statusBarHeight;
		if (!getApp().globalData.statusBarHeight) {
			const sys = uni.getSystemInfoSync();
			console.log('111');
			this.statusBarHeight = sys.statusBarHeight;
		}
		console.log('statusBarHeight', this.statusBarHeight);
	},
	mounted() {
		const sys = uni.getSystemInfoSync();
		this.sys = sys;
		// this.getAndroidUrl();
		const { bw_link, bw_params } = getApp().getBWData(['bw_link', 'bw_params']);
		this.isApp = bw_link.isApp == 1 ? true : false;
		this.isHead = bw_link.isHead == 1 ? false : true;
		console.log('statusBarHeight', this.statusBarHeight);
		this.statusBarHeight = bw_params.statusBarHeight;
		if(this.isGrade){
			this._getGrade()
		}
		uni.createSelectorQuery(this).select('.head-custom-wrap').boundingClientRect((rect)=>{
			console.log(rect)
			if(rect){
				this.popupSpace = rect.height
			}
		}).exec()
	},
	destroyed() {
		clearTimeout(this.timer);
	},
	methods: {
		// 搜索
		searchChange(e){
			console.log(e)
			this.$emit('change',e)
		},
		// 获取年级
		_getGrade(){
			gradeSelect().then(res=>{
				const list =[ ...[{ gradeName: '所有年级', gradeId: 0 }],...res.data]
				this.gradeList = list
			})
		},
		tagTap(e){
			this.grade = e.gradeId
			this.gradeName = e.gradeName
			this.$emit('change', e)
			this.downFilter()
		},
		// 返回上一页面
		downFilter() {
		  this.popupFilter = !this.popupFilter
		},
		backTap() {
			if (!this.isBack) {
				return;
			}
			// #ifdef H5
			uni.navigateBack({
				delta: 1,
				success: res => {
					this.timer = setTimeout(() => {
						const data = {
							type: 'back'
						};
						this.$bridge.callHandler('recruitHandler', data, () => {
							console.log('recruitHandler', '返回');
						});
					}, 500);
				},
				fail: () => {}
			});
			// #endif
			// #ifdef MP
			uni.navigateBack();
			// #endif
		},
		goSearch() {
		  this.$pageTo('/bks/datum/search')
		},
		getAndroidUrl() {
			getAndroidVersion().then(res => {
				this.urlAndroid = res.data.updateAddress;
			});
		},
		openApp() {
			const { bw_link, bw_user_temp } = getApp().getBWData(['bw_link', 'bw_user_temp']);
			const href = window.location.href;
			let share = getRequest(href, 'bwlink');
			let sharerId = bw_link.sharerId;
			if (share) {
				share = decodeURIComponent(share);
				const data = JSON.parse(utf8to16(base64decode(share)));
				sharerId = data.sharerId;
				console.log(data);
			}
			const obj = {
				...this._linkData,
				sharerId,
				href: href
				// href: href.substr(0, href.indexOf("?")),
			};
			if (obj.realName) {
				obj.realName = encodeURIComponent(obj.realName);
			}
			if (obj.companyName) {
				obj.companyName = encodeURIComponent(obj.companyName);
			}
			const url = this.isOpeninstall ? openAppULinkNew : openAppULink;
			url(this.linkId, obj, this.urlAndroid);
		}
	}
};
</script>

<style lang="scss" scoped>
@import url('@/components/head-custom/index.scss');
// #ifdef MP
.head-transparent .head {
	padding-left: 20rpx;
}
// #endif
.head-Blur {
	background: linear-gradient(180deg, var(--navViewStartColor) 3%, var(--navViewCenterColor) 43%, rgba(255, 255, 255, 1) 100%);
}
.head-custom .statusBarHeight{}
.head-custom .left .title{left: 88rpx;transform: translateX(0);}
.active .bksCIcon{transform: rotate(180deg);}
.popupFilter{ background-color: #fff;}
.popupFilter .tag{margin-left: 30rpx; padding: 0 30rpx 0 0; height: 80rpx;border-bottom: 1px solid #F5F6F6; overflow: hidden;}
.input {padding-left: 30rpx;width: 100%;height: 58rpx;color: #333;border-radius: 29rpx;background: #F5F6F6;border: 0;}
.nav-title .bks-c-ziyuan47down{transform: scale(.5);}
</style>
